<template>
	<view>
		<view v-for="item in jokes" class="item">{{ item }}</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
const jokes = ref([]);
import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
//获取笑话数据
//可以使用一个函数来判断是不是下拉刷新  默认值给true
const getJokes = async (isfresh = true) => {
	const res = await uni.request({
		url: 'https://api-vue-base.itheima.net/api/joke/list',
		method: 'GET',
		data: {
			num: 10
		}
	});
	//需要判断是下拉刷新还是触底加载更多
	//下拉刷新的话,就是直接覆盖数据
	//触底加载的话,就是将数据直接拼接在已有数据的后面
	if (isfresh) {
		jokes.value = res.data.data;
	} else {
		jokes.value = [...jokes.value, ...res.data.data];
	}
};

//实现下拉刷新
onPullDownRefresh(async () => {
	// console.log('下拉刷新了呦~');
	//获取新的数据
	await getJokes();
	//自动关闭下拉刷新
	uni.stopPullDownRefresh();
});

//实现触底加载更多
onReachBottom(async () => {
	// console.log('我触底了呦~');
	//获取新数据
	await getJokes(false);
});

getJokes();
</script>

<style>
page {
	background-color: aqua;
}

.item {
	color: #000;
	background-color: #fff;
	margin: 18rpx;
	border-radius: 30rpx;
	padding: 20rpx;
}
</style>
